import { forwardRef, useImperativeHandle, useState } from 'react';

import { Button, Descriptions, Drawer, Space, Tag } from 'antd';

import Dict from '@/components/dict';

import { LogoutTypeObj } from '@/enum/log';
import { formatDate, formatValue } from '@/utils';

import { BizObject } from './index';

export type DetailRef = {
  open: (arg: { rowData: BizObject }) => void;
};

export type DetailProps = {};

const Detail: React.ForwardRefRenderFunction<DetailRef, DetailProps> = (_, ref) => {
  // 弹窗开启状态
  const [open, setOpen] = useState(false);
  const [args, setArgs] = useState<ArgumentsType<DetailRef['open']>[0]>();

  useImperativeHandle(ref, () => {
    return {
      open: (arg) => {
        setArgs(arg);
        setOpen(true);
      }
    };
  });

  const onCancel = () => {
    setOpen(false);
  };

  return (
    <Drawer
      title="详情"
      extra={
        <Space>
          <Button onClick={onCancel}>关闭</Button>
        </Space>
      }
      width="50%"
      open={open}
      onClose={onCancel}
    >
      <Descriptions size="small" column={2} bordered title="登录信息">
        <Descriptions.Item label="是否在线">
          {args?.rowData.online ? <Tag color="green">在线</Tag> : <Tag>离线</Tag>}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {formatDate(args?.rowData.createTime)}
        </Descriptions.Item>
        <Descriptions.Item label="登录时间">
          {formatDate(args?.rowData.loginTime)}
        </Descriptions.Item>
        <Descriptions.Item label="登出时间">
          {formatDate(args?.rowData.logoutTime)}
        </Descriptions.Item>
        <Descriptions.Item label="失效时间">
          {formatDate(args?.rowData.expireTime)}
        </Descriptions.Item>
        <Descriptions.Item label="登出方式">
          {formatValue(LogoutTypeObj.get(args?.rowData?.logoutType as number)?.text)}
        </Descriptions.Item>
        <Descriptions.Item label="登出说明">{args?.rowData.logoutExplain}</Descriptions.Item>

        <Descriptions.Item label="token">{args?.rowData.token}</Descriptions.Item>
      </Descriptions>

      <div style={{ height: 40 }}></div>

      <Descriptions size="small" column={2} bordered title="客户端信息">
        <Descriptions.Item label="登录城市">{args?.rowData?.loginCity}</Descriptions.Item>
        <Descriptions.Item label="登录ip">{args?.rowData?.loginIp}</Descriptions.Item>
        <Descriptions.Item label="请求客户端类型">
          <Dict dicCode="clientType" value={args?.rowData?.clientType} />
        </Descriptions.Item>
        <Descriptions.Item label="操作系统">{args?.rowData?.systemName}</Descriptions.Item>
        <Descriptions.Item label="浏览器">{args?.rowData?.browser}</Descriptions.Item>
      </Descriptions>

      <div style={{ height: 40 }}></div>

      <Descriptions size="small" column={2} bordered title="用户信息">
        <Descriptions.Item label="用户id">{formatValue(args?.rowData?.userId)}</Descriptions.Item>
        <Descriptions.Item label="请求用户名">
          {formatValue(args?.rowData?.username)}
        </Descriptions.Item>
        <Descriptions.Item label="请求用户姓名">
          {formatValue(args?.rowData?.fullName)}
        </Descriptions.Item>
        <Descriptions.Item label="请求用户类型">
          <Dict dicCode="userType" value={args?.rowData?.userType} />
        </Descriptions.Item>
      </Descriptions>
    </Drawer>
  );
};

export default forwardRef(Detail);
